* {
  /* 盒子大小不包括外边距 */
  box-sizing: border-box;
}
body {
  /* 背景颜色 */
  background-color: #111;
  /* 弹性盒子 */
  display: flex;
  /* x轴上居中 */
  align-items: center;
  /* y轴上居中 */
  justify-content: center;
  /* 高 */
  height: 100vh;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 外边距 */
  margin: 0;
}
.container {
  /* 弹性盒子 */
  display: flex;
  /* x轴上居中 */
  align-items: center;
  /* y轴上居中 */
  justify-content: center;
  /*  被打断到多个行中 */
  flex-wrap: wrap;
  /* 最大宽度 */
  max-width: 400px;
}
.square {
  /* 背景颜色 */
  background-color: #1d1d1d;
  /* 盒子阴影 */
  box-shadow: 0 0 2px #000;
  /* 高 */
  height: 16px;
  /* 宽 */
  width: 16px;
  /* 外边距 */
  margin: 2px;
  /* 过度 */
  transition: 2s ease;
}
.square:hover {
  /* 以秒或毫秒为单位指定过渡动画所需的时间 */
  transition-duration: 0s;
}
